import { useEffect } from "react";
import { useSelector,useDispatch } from "react-redux";
//导入actionCreater 
import {increment,decrement,addToNum}  from './store/modules/countStore'
import {fetchChannelList} from './store/modules/channelStore'

function App() {
  const {count} = useSelector(state => state.counter)
  const {channelList} = useSelector(state => state.channel)
  console.log('ccc',channelList);
  const dispatch = useDispatch()
  //使用useEffect触发异步请求执行
  useEffect(()=>{
    dispatch(fetchChannelList())
  },[dispatch])
  return (
    <div className="App">
      <button onClick={()=>dispatch(decrement())}>-</button> 
      {count}
      <button onClick={()=>dispatch(increment())}>+</button>
      <button onClick={()=>dispatch(addToNum(10))}>add to 10</button>
      <button onClick={()=>dispatch(addToNum(20))}>add to 20</button>
      <ul>
        {channelList.map(item => <li key={item.id}>{item.name}</li>)}
        {/* {channelList} */}
      </ul>
    </div>
  );
}

export default App;
